<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>阅读宝商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../default/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <style type="text/css">
        .mui-row.mui-fullscreen > [class*="mui-col-"] {
            height: auto;
        }

        .mui-col-xs-3,
        .mui-control-content {
            overflow-y: auto;
            height: 100%;
        }

        .mui-segmented-control .mui-control-item {
            line-height: 50px;
            width: 100%;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            background-color: #fff;
        }

        .mui-bar {
            border-bottom: 1px solid #F5F5F5;
        }

        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,
        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
            border: none;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item,
        .mui-segmented-control .mui-control-item,
        .mui-search .mui-placeholder .mui-icon {
            color: #666;
        }

        .mui-bar-nav ~ .mui-content {
            padding-bottom: 50px;
        }

        .mui-bar {
            background: rgba(255, 255, 255);
        }

        .mui-bar-nav.mui-bar .mui-icon span {
            font-weight: 500;
            font-size: 14px;
        }

        /*商城样式美化*/
        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,
        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
            display: inline-block;
            width: 33.333%;
            padding: 0;
            line-height: inherit;
        }
        #segmentedControlContents{
            background-color: #fff;
            margin-bottom: 100px;
        }
        .mui-content{
            padding-bottom: 50px;
        }
        .mui-control-item img {
            width: 40px;
            margin-top: 10px;
        }

        .mui-segmented-control {
            display: block;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active p{
            color: #ffdb28;
            font-weight: 600;
        }
        .shop-list .shop-list-cent{
            width: 50%;
            padding: 10px;
            position: relative;
        }
        .shop-list .shop-list-cent img{
            width: auto;
            height: auto;
        }
        .shop-list li:nth-child(2n-1){
            border-right: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
        }
        .shop-list li:nth-child(2n-2){
            border-bottom: 1px solid #f5f5f5;
        }
        .shop-list .shop-list-cent{
            margin-top: 0;
        }
        .shop-list-cent p {
            text-align: left;
        }
        .mui-col-xs-3, .mui-control-content{
            overflow-y: initial;
        }
        .shop-parc{
            display: flex;
        }
        .shop-parc span{
            flex:1
        }
        .shop-parc span:nth-child(2n-1){
            text-align: left;
        }
        .shop-parc span:nth-child(2n-2){
            text-align: right;
        }
        .shop-parc-box{
            padding: 5px;
        }
        .shop-list .shop-list-cent1{
            border: 0 !important;
            text-align: center;
            padding: 40px;
            position: relative;
        }
        #segmentedControls{
            background: #fff;
            border-top: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            padding: 10px 0;
        }
        .vip-shop-cit{
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 30px;
            background: url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/icon/vip-shop-cit.png") no-repeat;
            background-size: 100% 100%;
        }

        .mui-slider .mui-slider-group .mui-slider-item{
            text-align: center;
        }
        .mui-slider{
            background-color: #fff;
        }
        .mui-slider .mui-slider-group .mui-slider-item img{
            /*max-height: 400px;*/
            /*max-width: 500px;*/
            /*width: auto;*/
        }

        .mui-slider .mui-slider-group .mui-slider-item{
            height: 320px;
        }
        .mui-slider .mui-slider-group .mui-slider-item a img{
            width: 100%;
            height: 320px;
        }
        .mui-search .mui-input-clear{
            width: 80%;
            text-align: center;
            background-color:white;
        }
        .mui-search .mui-placeholder{
            text-align: left;
        }

        .mui-input-row .mui-btn{
            line-height: 1.1;
            float: right;
            width: 19%;
            padding: 9px 2px;
            font-size: 13px;
        }
        .mui-btn-primary{
            color: #000000;
            border: 1px solid #ffffff;
            background-color: #ffffff;
        }
        .mui-input-row .mui-input-clear~.mui-icon-clear{
            width: 0;
            height: 0;
        }
        .mui-input-row:last-child{
            display: inline-block;
            width: 91%;
        }
        .mui-btn-link{
            width: 9%;
            color: #0f0f0f;
        }
        .mui-btn, button{
            line-height: 0.5;
        }

    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="reading">
    <a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back"></a>
    <h1 class="mui-title">商城</h1>
</header>
<!--<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fff"></a>
    <h1 class="mui-title">套餐明细</h1>
</header>-->
<div class="mui-content mui-row mui-fullscreen">
    <!--<div class="mui-content-padded" style="margin: 5px;">-->
        <!--<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">-->
            <!--<span class="mui-icon mui-icon-left-nav"></span>-->
        <!--</button>-->
        <!--<div class="mui-input-row mui-search">-->
            <!--<input type="search" class="mui-input-clear" placeholder="请输入商品名称" id="searchs">-->
            <!--<button type="button" class="mui-btn mui-btn-primary" onclick="queryshoplist()">搜索</button>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div class="mui-col-xs-12" style="margin-top: -15px">-->
    <!--<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">-->
    <!--</div>-->
    <!--</div>-->
    <div id="segmentedControlContents" class="mui-col-xs-12" style="margin-top: -15px;background: #efeff4">
        <!--<div style="text-align: center" id="shuju">-->
        <!--<span>12132132132132</span>-->
        <!--</div>-->
        <div id="item1" class="mui-control-content mui-active">
        </div>
        <div id="item2" class="mui-control-content">
        </div>
        <div id="item3" class="mui-control-content">
        </div>
    </div>
</div>

<!-- 底部导航 -->

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="../../index.html">
        <span class="mui-icon icon iconfont icon-xinwen"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="./video.html">
				<span class="mui-icon icon iconfont icon-shipin">
					<!-- <span class="mui-badge">9</span> --></span>
        <span class="mui-tab-label">视频</span>
    </a>
    <a class="mui-tab-item" href="./shop.html">
        <span class="mui-icon icon iconfont icon-shangcheng"></span>
        <span class="mui-tab-label">阅读宝商城</span>
    </a>
    <a class="mui-tab-item mui-active" href="./task.html">
        <span class="mui-icon icon iconfont icon-task"></span>
        <span class="mui-tab-label">任务</span>

    </a>
</nav>

<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->
<!-- <script src="../default/js/mui.lazyload.js"></script> -->
<!-- <script src="../default/js/mui.lazyload.img.js"></script> -->

<script type="text/javascript">

    /*mui.alert('商城暂未开放', '提示', function () {
        mui.openWindow({
            url: '../../index.html',
        });
    });*/

    $(function () {
        // 自动获取焦点
        setTimeout("$('input[type=search]').focus()",200);
    });

    mui.init({
        swipeBack: true //启用右滑关闭功能
    });

    var slider = mui("#slider");
    slider.slider({
        interval: 3000
    });

    mui('.mui-bar-tab').on('tap', 'a', function (e) {
        mui.openWindow({
            url: $(this).attr('href')
        });
    });

    mui('body').on('tap', '#shop-distribution', function (e) {
        mui.openWindow({
            url: 'shop-distribution.html'
        });
    });
    mui('body').on('tap', '.backahter', function (e) {
        mui.openWindow({
            url: 'shop-distributions.html'
        });
    });

    // 根据商品列表id跳转商品详情
    mui('body').on('tap', '.shop-list-cent', function (e) {
        var id = this.getAttribute('data-shop-details');
        //打开详情页面
        mui.openWindow({
            url: 'shop-details.html?targetId=' + id
        });
    });

    // // 根据商品列表id跳转商品详情
    // mui('#segmentedControls').on('tap', '.mui-control-item', function (e) {
    //     setTimeout(function () {
    //         if($(".mui-active:eq(2) li").length==0){
    //             $(".mui-active:eq(2) .shop-list").html('<li class="shop-list-cent1" data-shop-details=""><p><img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/nocase.png"></p><p class="mui-ellipsis">当前选项暂无商品</p></li>');
    //         }
    //     },200)
    // });



    $(function () {
        queryshoplist();
    });

    function queryshoplist() {

        var searchs=$("#searchs").val();

        mui.showLoading("正在加载..", "div");
        $.ajax({
            url: website + '/CommodityController/queryAllMemberTtems',
            type: 'post',
            // data:{
            //     tradeName:searchs
            // }
            // ,
            success: function (data) {
                console.log(data);
                // if(data==""||data==null){
                //
                // }else
                // {
                // var controls = document.getElementById("segmentedControls");
                var contents = document.getElementById("segmentedControlContents");
                var html = [];

                if(data.data.length==0){
                    mui.hideLoading();
                    return;
                }
                data.data.forEach(function (one) {
                    console.log(one);
                    html.push('<div id="content' + one.id +
                        '" class="mui-control-content"><ul class="shop-list">');
                    data.data.forEach(function (two) {
                        if (two.trade_name != '58会员') {
                            html.push('<li class="shop-list-cent" data-shop-details="' + two.id + '"><p><img src="' + two.encrypted_name +
                                '" alt=""></p><div class="shop-parc-box"><p class="mui-ellipsis">' + two.trade_name + '</p><div class="shop-parc">');
                            html.push('<span class="red mui-ellipsis">￥' + two.commodity_price + '</span><span><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">购买</button></span></div></div>');
                            // if (two.commodity_reading_treasure == 0 || two.commodity_reading_treasure == '' || two.commodity_reading_treasure == null) {
                            //     html.push('<span class="red mui-ellipsis">￥' + two.commodity_price + '</span><span><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">购买</button></span></div></div>');
                            // } else if (two.commodity_price == 0 || two.commodity_price == '' || two.commodity_price == null) {
                            //     html.push('<span class="red mui-ellipsis">' + two.commodity_price + '阅读宝</span><span><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button></span></div></div>');
                            // } else {
                            //     html.push('<span class="red mui-ellipsis">￥' + two.commodity_price + '+' + two.commodity_reading_treasure + '阅读宝</span><span><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">购买</button></span></div></div>');
                            // }
                            // if (two.designated_product == '是') {
                            //     html.push('<div class="vip-shop-cit"></div>');
                            // }

                            html.push('</li>');
                        }

                    });
                    html.push('</ul></div>');
                });
                contents.innerHTML = html.join('');
                //默认选中第一个
                // controls.querySelector('.mui-control-item').classList.add('mui-active');
                contents.querySelector('.mui-control-content').classList.add('mui-active');
                mui.hideLoading();

            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                setTimeout(function () {
                    window.location.href = 'http://newst.whilte.com/index.html';
                }, 1000)
            }
        })
    };


</script>

</body>
</html>
